<template>
  <div id="formcom" class="clearfix">
    <div class="block_com clearfix" style="padding-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input1" clearable maxlength="10" show-word-limit></el-input>
      <el-input placeholder="请输入密码" v-model="input2" show-password></el-input>
    </div>

    <div class="block_com" style="margin-top: 15px;">
      <el-input
        placeholder="请选择日期"
        suffix-icon="el-icon-date"
        v-model="input1">
      </el-input>
    </div>

    <div class="block_com" style="margin-top: 15px;">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="input2">
      </el-input>
    </div>

    <div style="margin-top: 15px;">
      <el-input
        type="textarea"
        :autosize="{ minRows: 4, maxRows: 8}"
        placeholder="请输入内容"
        v-model="textarea2">
      </el-input>
    </div>

    <div style="margin-top: 15px;">
      <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div style="margin-top: 15px;">
      <template>
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio>
      </template>
    </div>
    <div style="margin-top: 15px;">
      <el-switch
        v-model="value_switch"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
      <el-switch 
        v-model="value_switch"
        active-color="#13ce66"
        inactive-color="#ff4949"
        :disabled="value_switch_disabled">
      </el-switch>
    </div>
    <div style="margin-top: 15px;">

    </div>
  </div>
</template>

<script>
import paging from "@/components/paging"

export default {
  name: "formcom",
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      textarea2: "",
      select: "",
      radio: "",
      value_switch: true,
      value_switch_disabled: true
    };
  },
  methods: {

  },
  mounted() {
    
  },
  created() {
    
  },
  components:{
    // "paging": paging,
  }
};
</script>

<style >
  #formcom{
    height: 100%;
  }
  .el-select .el-input {
    width: 130px;
  }
  .block_com.clearfix .el-input{
    float: left;
    width: 50%;
  }

</style>